<div class="uk-modal-dialog uk-background-secondary">
    <button class="uk-modal-close-default" type="button" uk-close></button>
    <div class="uk-modal-header uk-background-muted uk-grid-collapse" uk-grid>
        <div class="uk-width-3-4@s">
            <h2 class='uk-modal-title'>{{ name }} - {{ value }}</h2></div>
        <div class='uk-width-1-4@s'> {% for tag in tags %}
            <span class='uk-label'>{{tag}}</span> {% endfor %}</div>
    </div>
    <div class="uk-modal-body">
        <ul uk-tab class="nav-items" uk-switcher="animation: uk-animation-fade">
            <li class='nav-item'>
                <a href="#challenge">Challenge</a>
            </li>
            {% if solves == None %} {% else %}
            <li class='nav-item'>
                <a href="#solves" class='challenge-solves'>{{ solves }} Solves</a>
            </li>
            {% endif %}
        </ul>
        <ul class="uk-switcher uk-margin">
            <li id='challenge'>
                <p class="challenge-desc">{{ description | safe }}</p>
                <div class="challenge-hints hint-row row">
                    {% for hint in hints %}
                    <div class='uk-text-center uk-margin'>
                        <a class="uk-button uk-button-small uk-button-default" href="javascript:;" onclick="javascript:loadhint({{hint.id}})">
                                    {% if hint.content %}
                                        <small>
                                        View Hint
                                        </small>
                                    {% else %}
                                        {% if hint.cost %}
                                            <small>
                                            Unlock Hint for {{hint.cost}} points
                                            </small>
                                        {% else %}
                                            <small>
                                            View Hint
                                            </small>
                                        {% endif %}
                                    {% endif %}
                                </a>
                    </div>
                    {% endfor %}
                </div>
                <div class="challenge-files uk-margin uk-text-center">
                    {% for file in files %}
                    <div class='uk-margin-small'>
                        <a class='uk-button uk-button-primary uk-button-small text-truncate' href='{{script_root}}/files/{{file}}'>
                                    <span uk-icon="icon: download"></span>
                                    <small>
                                    {% set segments = file.split('/') %}
									{% set file = segments | last %}
									{% set token = file.split('?') | last %}
									{% if token %}
										{{ file | replace("?" + token, "") }}
									{% else %}
										{{ file }}
									{% endif %}
                                    </small>
                                </a>
                    </div>
                    {% endfor %}
                </div>
            </li>
            <li>
                <div id='solves'>
                    <table class="uk-table uk-table-striped uk-table-hover uk-text-center">
                        <thead>
                            <tr>
                                <th class='uk-text-center'>Name</th>
                                <th class='uk-text-center'>Date</th>
                            </tr>
                        </thead>
                        <tbody id="challenge-solves-names">
                        </tbody>
                    </table>
                </div>
            </li>
        </ul>
    </div>
    <div class="uk-modal-footer uk-background-muted">
        <form class="uk-form uk-form-stacked uk-grid-small" uk-grid>
            <div class="uk-width-3-4@s">
                <input class="form-control uk-input uk-input-large uk-input-width-medium" type="text" name="answer" id="submission-input" placeholder="{{ name }} Flag" />
                <input id="challenge-id" type="hidden" value="{{id}}">
            </div>
            <div class="uk-width-1-4@s">
                <button type="submit" id="submit-key" tabindex="5" class="uk-button uk-button-secondary float-right">Submit</button>
            </div>
            <div id="result-notification" class="alert uk-margin uk-text-center uk-width-1-1@s" uk-alert role="alert" style="display: none;">
                <p class='uk-text-large' id="result-message"></p>
            </div>
        </form>
    </div>
</div>
